<template>
  <div class="home">
    <div class="search-box">
      <el-form label-position="inline" label-width="auto" :model="searchForm">
        <el-form-item label="编号">
          <el-input v-model="searchForm.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input
            v-model="searchForm.region"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-input v-model="searchForm.type" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-input v-model="searchForm.type" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-input v-model="searchForm.type" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-input v-model="searchForm.type" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handleAdd">查询</el-button>
          <el-button @click="handleAdd">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btns-box">
      <span class="table-name">数据列表</span>
      <span class="btns">
        <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
        <el-button size="small" type="primary" @click="handleEdit">编辑</el-button>
        <el-button size="small" type="primary" @click="handleDel">删除</el-button>
      </span>
    </div>
    <div class="table-container">
      <!-- 志愿者编号、任务名称、获得福币、获得时间、获得方式、状态 -->
      <el-table ref="myTable" :data="list" v-loading="loading" border>
        <el-table-column
          label="志愿者编号"
          prop="questionName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="任务名称"
          prop="createTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="获得福币" prop="sort" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="获得时间" prop="sort" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="获得方式" prop="sort" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            {{ row.status === 1 ? "生效中" : "已撤销" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <!-- <el-button type="text" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="text" @click="handleDel([scope.row.id])"
              >删除
            </el-button> -->
            <el-button
              v-if="row.status === 1"
              type="text"
              @click="handleEdit(scope.row)"
            >
              生效
            </el-button>
            <el-button v-else type="text" @click="handleEdit(scope.row)">
              撤销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev,pager,next,jumper"
        v-model:current-page="listQuery.current"
        :page-size="listQuery.size"
        :page-sizes="[10, 15, 20]"
        :total="listQuery.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { fetchList } from "@/api";

const searchForm = reactive({});

const list = ref([]);

const loading = ref(false);

const listQuery = reactive({
  current: 1,
  size: 10,
  total: 0,
});

const handleSizeChange = (val) => {
  listQuery.current = 1;
  listQuery.size = val;
  getTableList();
};
const handleCurrentChange = (val) => {
  listQuery.current = val;
  getTableList();
};

const getTableList = () => {
  loading.value = true;
  const params = { ...listQuery, ...searchForm};
  fetchList(params)
    .then((res) => {
      list.value = res?.data.list || [];
      listQuery.total = res?.data.total || 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getTableList();
});
</script>
<style lang="less" scoped>
.home {
}
</style>
